<template>
  <div class="type-title relative w-100">
    <div class="title-span absolute">
      {{ title }}
      <slot />
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
      }
    }

  }

</script>
<style lang='scss' scoped>

  @import '@/assets/css/mixin.module.scss';
  .type-title {
    height: 1px;
    margin: 20px 0 30px;
    @include themeify {
      background-color: themed('columnsConfigureTitleBgColor');
    }
    .title-span {
      top: -16px;
      min-width: 110px;
      padding: 0 20px;
      height: 33px;
      font-size: 14px;
      line-height: 33px;
      color: #fff;
      -webkit-clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
      clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      @include themeify {
        background-color: themed('columnsConfigureTitleBgColor');
      }
    }
  }
</style>
